<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首页</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="../../../css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="../../../js/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="../../../js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="../../../layui/css/layui.css">
    <script src="../../../layui/layui.js"></script>
</head>

<body>
<div style="padding:0px; margin:0px;">
 <ul class="breadcrumb" style="  margin:0px; " >
    	<li><a href="#">系统管理</a></li>
        <li>权限变更</li>
    </ul>
</div>
<div class="row alert alert-info"  style="margin:0px; padding:3px;" >
<form class="form-horizontal">
	<div class="col-sm-2">角色名称:</div>
    <div class="col-sm-3">
    	<input type="text"  class="form-control input-sm"/>
    </div>
    <input type="button"   class="btn btn-danger"   value="查询"/>

    </form>
</div>
<div class="row" style="padding:15px; padding-top:0px; ">
	<table id="role_tab" lay-filter="role_tab">
    </table>
</div>

<script>

    var select_role_obj;
    layui.use(['table',"layer"], function(){
        var table = layui.table;
        var layer = layui.layer;

        table.render({
            elem: '#role_tab'
            ,url:'/ems_web/view/system/roleinfo/AjaxRoleInfoServlet.do?method=enable'
            ,page:true
            ,cols: [[
                {field:'roleId', width:80, title: 'ID', sort: true}
                ,{field:'roleName', width:180, title: '角色名称'}
                ,{field:'roleDesc', width:180, title: '角色描述'}
                ,{field:'roleState', width:80, title: '状态',templet:function (e) {
                        let state = e.roleState == 1 ? "正常" : "禁用";
                        let color = e.roleState == 1 ? "normal" : "danger";
                        return `<a href="#" class="layui-btn ayui-btn-${color} layui-btn-xs">${state}</a>`;
                    }}
                ,{ width:280, title: '操作',templet:function () {
                        return "<a href='#' lay-event='change'>权限变更</a>";
                    }}
            ]]
        });


        table.on('tool(role_tab)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            select_role_obj = obj.data;
            if( layEvent == 'change' ){
                layer.open({
                    type:2,
                    content:"anthorty_change.html",
                    maxmin:true,
                    area:["800px","600px"]
                })
            }
        })
    });
</script>
</body>
</html>
